var VS_SHADER_RESOURCE =
    'attribute vec4 a_Color;\n' +
    'attribute vec4 a_Position;\n' +
    'varying vec4 v_Color;\n' +
    'void main(){\n' +
    '   gl_Position = a_Position;\n' +
    '   v_Color = a_Color;\n' +
    '}\n';
var FS_SHADER_RESOURCE =
    'precision mediump float;\n' +
    'varying vec4 v_Color;\n' +
    'void main(){\n' +
    '   gl_FragColor = v_Color;\n' +
    '}\n';

function main() {
    var canvas = document.getElementById("canvas_id");
    var gl = getWebGLContext(canvas);
    if (!gl) {
        return console.error("not find gl!!!!");
    }
    if (!initShaders(gl, VS_SHADER_RESOURCE, FS_SHADER_RESOURCE)) {
        return console.error("init shader fial!!!!");
    }

    if (initShaderBuffer(gl)){

        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLES, 0, 3);
    }
}

function initShaderBuffer(gl) {
    var vertexBuffer = gl.createBuffer();
    if (!vertexBuffer)
    {
        console.error("创建缓冲区失败!!!");
        return false;
    }
    var vertexDatas = new Float32Array(
        [
            0.0,1,   1.0,0.0,0.0, // 坐标加颜色
            -1,-1, 0.0,1.0,0.0,
            1,-1,  0.0,0.0,1.0
        ]
    );
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertexDatas, gl.STATIC_DRAW);
    var a_Position = gl.getAttribLocation(gl.program, "a_Position");
    var a_Color = gl.getAttribLocation(gl.program, "a_Color");
    var size = vertexDatas.BYTES_PER_ELEMENT;
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, size * 5, 0);
    gl.enableVertexAttribArray(a_Position);
    
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertexDatas, gl.STATIC_DRAW);
    gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, size * 5, size * 2);
    gl.enableVertexAttribArray(a_Color);
    return true;
}

